<!DOCTYPE HTML>
<html lang="en"  >
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>订单列表</title>
		<link rel="stylesheet" type="text/css" href="${ctxPath}/static/assets/aui/css/aui.css" />
		<script type="text/javascript" src="${ctxPath}/static/assets/aui/script/api.js"></script>
		<!-- jQuery Include -->
		<script type="text/javascript" src="${ctxPath}/static/assets/scripts/jquery.min.js"></script>
		<style type="text/css">
			.goods-title {
				color: #757575 !important;
			}
			
			.goods-price {
				color: #666666 !important;
				font-weight: 700;
			}
			
			.aui-card-list-user-avatar>img {
				border-radius: 50%;
			}
		</style>
	</head>

	<body>
	<div style="background-color: #03a9f4 !important;width: 100%;height: 1rem;"></div>
	<div class="aui-tab" id="tab">
		<div class="aui-tab-item aui-active" onclick="showOrders(this,null)">所有订单</div>
		<div class="aui-tab-item" onclick="showOrders(this,0)">待付款</div>
		<div class="aui-tab-item" onclick="showOrders(this,1)">待使用</div>
		<div class="aui-tab-item" onclick="showOrders(this,3)">待评论</div>
		<div class="aui-tab-item" onclick="showOrders(this,2)">退款/售后</div>
	</div>
		<section class="aui-content" style="background-color: #ececec">

		</section>

	<footer class="aui-bar aui-bar-tab" id="footer">
			<div class="aui-bar-tab-item" onclick="examinePage()">
				<i class="aui-iconfont aui-icon-paper"></i>
				<div class="aui-bar-tab-label">周边服务</div>
			</div>
			<div class="aui-bar-tab-item" onclick="artificerPage()">
				<i class="aui-iconfont aui-icon-menu"></i>
				<div class="aui-bar-tab-label">技师列表</div>
			</div>
			<div class="aui-bar-tab-item   aui-active">
				<i class="aui-iconfont aui-icon-cart"></i>
				<div class="aui-bar-tab-label">订单列表</div>
			</div>
			<div class="aui-bar-tab-item" onclick="minePage()">
				<i class="aui-iconfont aui-icon-my"></i>
				<div class="aui-bar-tab-label">我的</div>
			</div>
		</footer>
	</body>
	<script type="text/javascript">
		apiready = function() {}
	</script>
	<script type="text/javascript">
		var  user=localStorage.getItem("userInfo");//以“key”为名称存储一个值“value”
		if(!user){
			location.href="${ctxPath}/wechat/public/toLoginPage";//未实现
		}
		$("#img").show();
		var obj = JSON.parse(user); // --> parse error
		$(function () {
			//支付日志
			displayOrderList(obj,null);

		})
		//绑定点击事件
		function showOrders(target,status) {
			$(".aui-tab-item").removeClass("aui-active");
			$(target).addClass("aui-active");
			displayOrderList(obj,status);
		}
		

		function displayOrderList(user,status) {
			$.ajax({
				type: "POST",
				url: "${ctxPath}/consumerOrder/searchOrder",
				data: {
					consumerId: user.id,
					status:status
				},
				dataType: "json",
				success: function (result) {
					if (result.status == "0000") {
						var  users=result.data;
						var str="";
						if(users.length>0){
							for(var i=0; i<users.length ;i++){
								var user=users[i];
								str+="<div class=\"aui-card-list aui-border-t aui-border-b\">\n" +
										"\t\t\t\t<div class=\"aui-card-list-header aui-card-list-user\">\n" +
										"\t\t\t\t\t<div class=\"aui-card-list-user-avatar\">\n" +
										"\t\t\t\t\t\t<img src=\"${ctxPath}/static/assets/images/2.jpg\">\n" +
										"\t\t\t\t\t</div>\n" +
										"\t\t\t\t\t<div class=\"aui-card-list-user-name\">\n" +
										"\t\t\t\t\t\t<div class=\"aui-font-size-14\">全身精油SPA</div>\n";
								if(user.status=='0')
									str+="\t\t\t\t\t\t<small>待付款</small>\n" ;
								else if(user.status=='1')
									str+="\t\t\t\t\t\t<small>待使用</small>\n" ;
								else if(user.status=='2')
									str+="\t\t\t\t\t\t<small>退款/售后</small>\n" ;
								else if(user.status=='3')
									str+="\t\t\t\t\t\t<small>待评论</small>\n" ;

								str+="\t\t\t\t\t</div>\n" +
										"\t\t\t\t\t<div class=\"aui-card-list-user-info\">5小时30分钟前</div>\n" +
										"\t\t\t\t</div>\n" +
										"\t\t\t\t<div class=\"aui-card-list-content aui-border-t\" style=\"margin-left: 3.5rem;\">\n" +
										"\t\t\t\t\t<ul class=\"aui-list aui-list-noborder\">\n" +
										"\t\t\t\t\t\t<div class=\"aui-list-item aui-padded-l-0\">\n" +
										"\t\t\t\t\t\t\t<div class=\"aui-list-item-inner\">\n" +
										"\t\t\t\t\t\t\t\t<div class=\"aui-list-item-title aui-font-size-14 goods-title\">90分钟</div>\n" +
										"\t\t\t\t\t\t\t\t<div class=\"aui-list-item-right goods-price\">￥5</div>\n" +
										"\t\t\t\t\t\t\t</div>\n" +
										"\t\t\t\t\t\t</div>\n" +
										"\t\t\t\t\t</ul>\n" +
										"\t\t\t\t</div>\n" +
										"\t\t\t\t<div class=\"aui-card-list-footer aui-border-t\">\n" +
										"\t\t\t\t\t<div></div>\n" +
										"\t\t\t\t\t<div>\n" ;
								if(user.status=='0')
									str+="\t\t\t\t\t\t<div class=\"aui-btn aui-btn aui-btn-outlined aui-btn-info aui-margin-r-10\">立即支付</div>\n" ;
								else if(user.status=='3'||user.status=='1') {
									str += "\t\t\t\t\t\t<div class=\"aui-btn aui-btn aui-btn-outlined aui-btn-info aui-margin-r-10\">再来一单</div>\n"
											+"\t\t\t\t\t\t<div class=\"aui-btn aui-btn aui-btn-outlined aui-btn-warning\">评价得积分</div>\n" ;
								}
								str+="\t\t\t\t\t</div>\n" +
										"\t\t\t\t</div>\n" +
										"\t\t\t</div>";
							}
						}else{
							str+="<div style='text-align: center;font-style: normal;font-size: 14px;width: 100%;height: 1.5rem;color: gray;margin-top: 15px;'>暂无相关订单信息!</div>";
						}
						$(".aui-content").html(str);
					}
				}
			});
		}

		function  artificerPage(){
			location.href="${ctxPath}/wechat/public/toArtificerListPage";
		}
		function  examinePage(){
			location.href ="${ctxPath}/wechat/public/toPeripheryPage";
		}
		function  minePage(){
			location.href ="${ctxPath}/wechat/public/toMinePage";
		}
	</script>
</html>